<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>非父子主件之间的传值</title>
        
        <script src='./vue.js'></script>
        
    </head>
    <body>
        <div id="app">
            <p>
            最总实现点击一个子组件改变另一个子组件内容的目的
            </p>
            <child content="zhang"> </child>
            <child content="axes"> </child>
        </div>
        <script >

        Vue.prototype.bus=new Vue()

        Vue.component('child',{

            //子组件的data 必须是个 function
            data:function(){ 
                return {
                    selfContent:this.content
                }
            },

            props: {
                content: String
                },
            template: '<div @click="handleClick" >{{selfContent}}</div>',
            methods:{
                handleClick:function(){
                    this.bus.$emit('change',this.selfContent)
                }
            },
            mounted:function(){
                    var this_=this
                    this.bus.$on('change',function(msg){
                        this_.selfContent=msg
                    })
            }
            
        })




           // var dom=document.getElementById('app');
           // dom.innerHTML='Hello world!!'

           //创建 vue 实例，参数为配置项 
           var app =new Vue({

               //指定作用范围，接管id app 的控件
                
               el:'#app',
               
           })
            
        </script>
    </body>
</html>
